<template>
  <div>
    <h3 class="title">App组件</h3>
    <hr />
    <child>
      <!-- 具名插槽 -->
      <!-- vue2.6之前 -- 依次执行显示 都会显示 -->
      <!-- <h3 slot="header">我是文章标题1</h3>
      <h3 slot="header">我是文章标题2</h3>
      <h3 slot="header">我是文章标题3</h3> -->
      <!-- vue2.6及之后写法 它只能写在template中，不能直接写在html标签上 -->
      <!-- vue2.6之后的具名插槽，重复调用，只会执行最后1次 -->
      <!-- <template v-slot:header> -->
      <!-- <template #header>
        <h3>我是文章标题1</h3>
      </template>
      <template #header>
        <h3>我是文章标题2</h3>
      </template>
      只会显示它
      <template #header>
        <h3>我是文章标题3</h3>
      </template> -->

      <!-- 默认插槽 -->
      <div>默认插槽</div>
    </child>
  </div>
</template>

<script>
// 同步导入
import child from './components/child.vue'
export default {
  components: {
    child
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped></style>
